{% extends 'IMTUserBundle::profil.html.twig' %}

{% block main_title %}Profil - Paramètres des comptes{% endblock %}

{% block include_style %}
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/imtdashboard/css/fullcalendar.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('bundles/imtuser/css/profil.css') }}">
{% endblock %}

{% block include_script %}
<script type="text/javascript">
$(document).ready(function(){
	$('#listProfilAccount input[type=checkbox][name=accountParticipant]').click(function(){
		fetchParticipants();
	});
	
	fetchParticipants();
});

function fetchParticipants(){
	$('#loaderProfilParticipant').show();
	$('#listProfilParticipant').hide();
	$('#listProfilParticipant').html('');
	
	var listAccount = '';
	$('#listProfilAccount input[type=checkbox][name=accountParticipant]:checked').each(function(){
		listAccount += $(this).val()+';';
	});

	$.ajax({
		url: '{{ path('account_list_participants') }}',
		global: false,
		type: "POST",
		data: {
			listAccount:listAccount
       	},
		dataType: "html",
		async:true,
		success: function(contenuHtml) {					
			$('#listProfilParticipant').html(contenuHtml);			
		},
		error: function(){
			$('#listProfilParticipant').html("<div class='alert alert-danger'><strong>Oops !</strong> Une erreur est survenue au niveau du serveur</div>");
		},
		complete: function(){	
			$('#loaderProfilParticipant').hide();
			$('#listProfilParticipant').show();
		}
	});
}
</script>
{% endblock %}

{% block profil_header %}
<h1>Profil <small>- Gérer mes comptes</small></h1>
{% endblock %}

{% block profil_menu %}
{% include 'IMTUserBundle::menu.html.twig' with {'menu_selected': 'comptes'} %}
{% endblock %}

{% block profil_content %}
<div class="row-fluid">
	<div class="span6">
		<fieldset>
			<legend>Mes comptes <a href="#modalAddAcount" data-toggle="modal" class="btn btn-small btn-success" style="float:right;"><i class="icon-plus icon-white"></i> Ajouter</a></legend>
			{{ form_errors(newAccountForm) }}
			<p>Selectionnez vos comptes pour voir apparaître vos listes de contacts :</p>
			{% render 'IMTAccountBundle:Default:listAll' with {'id':openAccount} %}
		</fieldset>
	</div>
	<div class="span6">
		<fieldset>
			<legend>Mes Contacts <a href="#" class="btn btn-small btn-success" style="float:right;"><i class="icon-plus icon-white"></i> Ajouter</a></legend>
			<div id="loaderProfilParticipant" style="text-align: center;"><img src="{{  asset('bundles/imtdashboard/images/loader2.gif') }}" alt="Chargement ..."/></div>
			<div id="listProfilParticipant"></div>	
		</fieldset>
	</div>
</div>

<div class="modal hide fade" id="modalAddAcount">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Ajouter un nouveau compte</h3>
    </div>
    <form action="{{ path('account_add') }}" {{ form_enctype(newAccountForm) }} method="POST" class="form-horizontal" style="margin:0;">	                
    <div class="modal-body">
		{{ form_row(newAccountForm.title, { 'label': 'Nom du compte'}) }} 
		{{ form_row(newAccountForm.color, { 'label': 'Couleur'}) }} 
		<div style="display:none;">
		<h6 style="margin-bottom: 8px;">Paramètres de connexion</h6>
		{{ form_row(newAccountForm.username, { 'label': 'Identifiant'}) }} 
        {{ form_row(newAccountForm.password, { 'label': 'Mot de passe'}) }}
        {{ form_rest(newAccountForm) }}
        </div>
		<hr>
		<div class="alert alert-success">
			<strong><i class="icon-ok icon-white"></i> News !</strong> Bientôt nos connecteurs vous permettrons de synchroniser tous vos comptes externes
		</div>
    </div>
    <div class="modal-footer">
    	<a href="#" class="btn" data-dismiss="modal">Annuler</a>
        <input type="submit" class="btn btn-primary" value="Ajouter un nouveau compte" />
    </div>
    </form>
</div>
{% endblock %}